<template>
  <div class="remove_all">
    <HeaderBar title="REMOVE" @back="handleBack" />
    <!-- 模糊效果 -->
    <div class="blur_block">
      <img :src="imgUrl" />
    </div>
    <!-- 生成图片任务失败，可重试 -->
    <div class="tast_fail_wrap" v-if="isRetry">
      <div class="sorry_tips">Sorry！</div>
      <div class="error_msg">A small error has occurred. <br />Please try again</div>
      <div class="retry_btn">
        <img src="@/assets/images/ic_retry@2x.png" />
        <span class="text">Retry</span>
      </div>
    </div>
    <div v-else-if="isBlurStatus">
      <ComfirmBtn
        btnName="Remove blur"
        :gemsNum="gemsNum"
        :diamondNum="diamondNum"
        @comfrim="removeOff"
        :isBlurStatus="isBlurStatus"
        :isShowDiamond="isShowDiamond"
      />
    </div>
    <!-- 消耗钻石后 -->
    <div class="comfirm_btn_wrap" v-else>
      <div class="comfirm_btn" @click="goAiPosePage">AI POSE</div>
      <div class="diamond_num bottom_tip">Generate a sexy pose with this photo</div>
    </div>
    <div class="save_wrap" v-if="!isBlurStatus" @click="saveImg">
      <img src="@/assets/images/icon_download@2x.png" class="save_img" />
      <span class="btn_name">Save</span>
    </div>
    <!-- 下载完成提示 -->
    <van-toast
      v-model:show="downloadShow"
      style="padding: 0"
      :duration="5000"
      class-name="download_toast"
    >
      <template #message>
        <div class="download_sucess">
          <img src="@/assets/images/icon_download@2x.png" />
          <span class="text">Saved in the gallery</span>
        </div>
      </template>
    </van-toast>
    <!-- 错误消息提示 -->
    <van-toast
      v-model:show="errorShow"
      style="padding: 0"
      :duration="5000"
      class-name="error_toast"
    >
      <template #message>
        {{ errorMsg }}
      </template>
    </van-toast>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import HeaderBar from "@/components/HeaderBar.vue";
import { showConfirmDialog } from "vant";
import { usePollingStore } from "@/stores/polling";
import { useRoute } from "vue-router";
import ComfirmBtn from "@/components/ComfirmBtn.vue";
import api from "@/api";
import { showToast } from "vant";

const route = useRoute();
const store = usePollingStore();

const imgUrl = ref("");
const ossUrl = ref("");

let errorMsg = ref("");
const errorShow = ref(false);

const handleBack = () => {
  if (route.meta.requireBackConfirm) {
    // 显示确认弹窗
    showConfirmDialog({
      confirmButtonText: "Still want to exit",
      cancelButtonText: "Cancel",
      className: "dialog-custom-class",
      message: "Are you sure you want to exit?",
    })
      .then(() => {
        router.back();
      })
      .catch(() => {
        // on cancel
      });
  } else {
    router.back();
  }
};

const isBlurStatus = ref(true);
const isRetry = ref(true);
const downloadShow = ref(false);

const gemsNum = ref("");
const diamondNum = ref("100");
const isShowDiamond = ref(true);

// const removeOff = () => {
//   isBlurStatus.value = false;
// };

const removeOff = async () => {
  if (ossUrl.value) {
    if (Number(gemsNum.value) < 100) {
      errorMsg.value = "Insufficient Balance";
      errorShow.value = true;
      return;
    }
    const params = {
      originFileUrl: ossUrl.value,
      taskType: 1,
    };
    try {
      const res = await api.taskSubmit(params);
      // 跳转
      router.push({
        path: "/poseCreating",
        query: {
          taskNo: res.data.taskNo,
          from: 'remove'
        },
      });
    } catch (err) {
      console.log(err);
      // 错误的时候，提示msg
      errorMsg.value = err.message;
      errorShow.value = true;
    }
  } else {
    showToast("Upload the picture first");
  }
};

const saveImg = () => {
  downloadShow.value = true;
};

const router = useRouter();

const goAiPosePage = () => {
  router.push("./AIPose");
};

// 查询积分余额
const queryBalance = async () => {
  try {
    const res = await api.pointsBalance();
    gemsNum.value = String(res.data.balance);
  } catch (err) {
    console.log(err);
  }
};

onMounted(() => {
  // 判断本地拉取结果
  if (store && !store.isPolling) {
    // isPolling轮询结束，是false时
    imgUrl.value = store.imgUrl;
  }
  isRetry.value = false;

 // 获取缓存图片地址
  ossUrl.value = sessionStorage.getItem("removeossUrl");

  queryBalance();
});
</script>

<style scoped lang="less">
.remove_all {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0 16px;
  /* 背景图设置 */
  background-image: url("../assets/images/bg_texture@2x.png");
  background-position: top center; /* 从顶部开始 */
  background-repeat: no-repeat; /* 不重复 */
  background-size: 100% auto; /* 宽度满屏，高度自适应 */
  background-color: #fbfbfd;
  .blur_block {
    width: 100%;
    height: 343px;
    margin-top: 16px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .tast_fail_wrap {
    .sorry_tips {
      font-weight: 700;
      font-size: 24px;
      color: #ed0067;
      text-align: center;
      line-height: 29px;
      margin-top: 16px;
    }
    .error_msg {
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      text-align: center;
      margin-top: 8px;
    }
    .retry_btn {
      width: 148px;
      height: 64px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid rgba(0, 0, 0, 0.45);
      margin: 0 auto;
      margin-top: 62px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 32px;
      }
      .text {
        font-weight: 400;
        font-size: 18px;
        color: #000000;
      }
    }
  }
  .comfirm_btn_wrap {
    margin-top: 12px;
    width: 100%;
    height: 64px;
    background: linear-gradient(90deg, #ffd52f 0%, #f874ff 50%, #516eff 100%);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    line-height: 64px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    border: 0;
    position: relative;
    .upload_fixed {
      height: 24px;
      position: absolute;
      right: 0;
      top: -5px;
      background: #3029f6;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 6px;
      .number {
        font-size: 14px;
        color: #ffffff;
      }
      .start_wrap {
        width: 32px;
        height: 32px;
        margin-right: -5px;
        background: linear-gradient(204deg, #fff7df 0%, #ffd900 100%);
        border-radius: 50%;
        border: 4px solid #3029f6;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 22px;
        }
      }
    }
    .diamond_num {
      width: 100%;
      height: 15px;
      line-height: 15px;
      position: absolute;
      text-align: center;
      font-weight: 400;
      font-size: 12px;
      color: #000000;
      left: 0;
      bottom: -24px;
    }
    .bottom_tip {
      font-size: 16px;
    }
    .blur_user {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 16px;
      .text {
        font-size: 18px;
        color: #000000;
        font-weight: 700;
        margin-right: 8px;
      }
      .img_star {
        width: 48px;
      }
    }
  }
  .save_wrap {
    width: 148px;
    height: 64px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.45);
    margin: 0 auto;
    margin-top: 116px;
    margin-bottom: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    .save_img {
      width: 26px;
    }
    .btn_name {
      font-size: 18px;
      color: #000000;
      margin-left: 10px;
    }
  }
  :deep(.download_toast) {
    .van-toast__text {
      padding: 0;
    }
    .download_sucess {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px;
      background: #fff;
      img {
        width: 32px;
      }
      .text {
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        margin-left: 8px;
      }
    }
  }
}
</style>
